作者： | 来源：互联网 | 2023-06-24 10:44
篇首语：本文由编程笔记#小编为大家整理，主要介绍了uniapp实现APP中内嵌H5应用相关的知识，希望对你有一定的参考价值。
现如今&＃xff0c;各大APP平台都有属于自己的小程序体系&＃xff0c;各种各样的应用都可直接内嵌在APP中实现一站式体验。使用uniapp开发的APP如何实现这样的功能呢&＃xff1f;答案就是内嵌web-view
注意事项
-
APP中有vue页面及nvue页面&＃xff0c;两种页面均可内嵌web-view&＃xff0c;但两种页面的表现不一&＃xff1a;vue页面会自动铺满整个页面&＃xff0c;接收web-view页面通信使用的是&＃64;message&＃xff1b;nvue页面则需要指定页面宽高&＃xff0c;接收web-view页面通信使用的是&＃64;onPostMessage
-
由APP通知web-view页面&＃xff0c;无论是vue页面还是nvue页面&＃xff0c;只有evalJS方法&＃xff0c;但调用的姿势不一致
vue页面调用&＃xff1a;
<template>
<web-view :src&＃61;"url" &＃64;message&＃61;"message">web-view>
template>
<script>
export default
xxx,
onLoad()
this.currentWebview &＃61; this.$mp.page.$getAppWebview();
this.currentWebview.children()[0].evalJS(&＃39;xxx&＃39;);
</script>
nvue页面调用&＃xff1a;
<template>
<web-view ref&＃61;"webview" :src&＃61;"url" &＃64;message&＃61;"message">web-view>
template>
<script>
export default
xxx,
onReady()
this.currentWebview &＃61; this.$refs.webview;
this.currentWebview.evalJS(&＃39;xxx&＃39;);
</script>
- nvue页面中使用的web-view页面是无法调用plus API的&＃xff0c;vue页面是可以控制外部web-view页面是否可用plus API&＃xff0c;其他事项具体参考web-view | uni-app官网
实现细节
博主使用的是vue页面的web-view组件&＃xff0c;因为页面需要铺满屏幕且需要plus API支持&＃xff0c;但实现的过程中还是会遇到大大小小的问题&＃xff0c;下边举两个具体实现中遇到的问题及解决方案
- 顶部导航栏的表现不一&＃xff1a;因内嵌web-view应用需要全屏显示&＃xff0c;标题栏也交由内嵌应用自定义&＃xff0c;故在pages.json中定义页面的时候&＃xff0c;须将页面的
titleNView设置为false。但即便如此&＃xff0c;其表现仍然不一致&＃xff0c;表现为android端的页面起始位置是手机屏幕的最顶部&＃xff08;含状态栏在内&＃xff09;&＃xff0c;ios端则是从状态栏之下开始渲染页面&＃xff0c;为了抹平差异&＃xff0c;可使用webview的setStyle统一
APP端设置&＃xff1a;
export default
xxx,
onReady()
this.currentWebview &＃61; this.$mp.page.$getAppWebview();
let screenRatio, safeAreaInsetsBtm, platform &＃61; this.$store.state;
let top &＃61; 0;
if (platform &＃61;&＃61;&＃61; &＃39;ios&＃39;)
let info &＃61; uni.getSystemInfoSync();
top &＃61; -info.statusBarHeight;
let bottom &＃61; safeAreaInsetsBtm / screenRatio;
this.currentWebview.children()[0].setStyle( top, bottom: parseInt(bottom) );
统一两端的top至手机屏幕最顶部&＃xff0c;bottom至手机屏幕安全距离之上
内嵌应用中设置&＃xff1a;
const actions &＃61;
setPage(context)
let statusbarHeight &＃61; plus.navigator.getStatusbarHeight();
let pageStyle &＃61; paddingTop: &＃96;calc(0.2rem &＃43; $statusbarHeightpx)&＃96; ;
context.commit(&＃39;pageStyle&＃39;, pageStyle);
;
- 内嵌应用中的数据传递&＃xff1a;由APP中调用
evalJS方法&＃xff0c;调用到的是内嵌应用index.html中定义的方法&＃xff0c;怎么将APP传递过来的信息传递到内嵌应用的vue页面去呢&＃xff1f;这里推荐一个插件mitt
APP中调用&＃xff1a;
export default
onReady()
this.currentWebview &＃61; this.$mp.page.$getAppWebview();
this.currentWebview.children()[0].evalJS("showTip(&＃39;提示测试&＃39;)");
内嵌应用的index.html中&＃xff0c;引用下载到本地的mitt.umd.js&＃xff1a;
DOCTYPE html>
<html lang&＃61;"en">
<head>
<meta charset&＃61;"utf-8" />
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge" />
<meta name&＃61;"renderer" content&＃61;"webkit" />
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, user-scalable&＃61;no, initial-scale&＃61;1.0, maximum-scale&＃61;1.0, minimum-scale&＃61;1.0" />
<script src&＃61;"<%&＃61; BASE_URL %>libs/uni-app/uni.app.webview.1.5.2.js">script>
<script src&＃61;"<%&＃61; BASE_URL %>libs/mitt/mitt.umd.js">script>
<title>xxxtitle>
head>
<body>
<noscript>
<strong>当前浏览器版本太低&＃xff0c;请升级浏览器或使用其他浏览器strong>
noscript>
<div id&＃61;"app">div>
<script>
window.bus &＃61; window.mitt();
const showTip &＃61; (tip) &＃61;>
window.bus.emit(&＃39;showTip&＃39;, tip);
;
script>
body>
html>
内嵌应用vue页面中&＃xff1a;
export default
activated()
window.bus.on(&＃39;showTip&＃39;, (tip) &＃61;>
alert(tip);
);
deactivated()
window.bus.off(&＃39;showTip&＃39;);
总结
在实现的过程中&＃xff0c;其实不单单只有这些内容&＃xff0c;具体的实现还是需要各位真枪实弹编码踩坑&＃xff0c;才能知道原来这里面还有这么细节的东西。只能感慨跨端确实不容易啊&＃xff0c;继续加油吧&＃xff0c;Keep learning…
京公网安备 11010802041100号